<template>
  <div class="restaurant" @click="$router.push('/shop')">
    <div class="img">
      <img :src="restaurant.image_path">
    </div>
    <div class="content">
      <!-- title -->
      <div class="title">
        <span class="brand">品牌</span>
        <span>{{restaurant.name}}</span>
      </div>
      <!-- 评分 -->
      <div class="start-content">
        <Rating :rating="restaurant.rating" />
        <span>{{restaurant.rating}}分</span>
        <span class="start">月售{{restaurant.recent_order_num}}单</span>
        <span class="start-feng" v-if="restaurant.delivery_mode">蜂鸟专送</span>
      </div>
      <!-- 配送 -->
      <div class="delivery">
        <span class="price">¥{{restaurant.float_minimum_order_amount}}起送</span>
        <span class="price-delivery">配送费¥{{restaurant.float_delivery_fee}}</span>
        <span class="time-delivery">
          <span class="price">{{(restaurant.distance / 1000).toFixed(2)}}km</span>
          <span>{{restaurant.order_lead_time}}分钟</span>
        </span>
      </div>

    </div>
  </div>
</template>
<script>
import Rating from '../components/Rating.vue'
export default {
  name: 'IndexShow',
  props: {
    restaurant: Object,
  },
  data () {
    return {
      startValue: 3.5
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  },
  components: {
    Rating
  }
}
</script>
<style  scoped>
.restaurant {
  touch-action: none;
  z-index: -99999;
  display: flex;
  background-color: #fff;
  border-bottom: 0.05rem solid #ccc;
}
.restaurant .img {
  padding: 0.2rem;
}
.restaurant img {
  width: 2rem;
  height: 100%;
}
.restaurant .content {
  float: 1;
}
.content {
  margin-top: 0.2rem;
  color: rgb(37, 37, 37);
  font-size: 0.35rem;
}
.brand {
  background-color: #f8e43b;
  padding: 0.05rem 0.1rem;
  border-radius: 0.1rem;
  text-align: center;
  font-size: 0.05rem !important;
  font-weight: 550;
  color: black;
}
.content .title span {
  /* display: inline-block; */
  width: 100%;
  margin-left: 0.15rem;
  font-weight: 550;
}
.start {
  position: relative;
  margin-left: 0.2rem;
}
.start-feng {
  display: inline-block;
  width: 1.5rem;
  height: 0.45rem;
  background-color: #2a83e2;
  text-align: center;
  line-height: 0.45rem;
  font-size: 0.05rem !important;
  color: rgb(247, 247, 247);
  margin-left: 1.2rem;
}
.start-content {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.05rem;
  color: #575758;
}
.delivery {
  color: #39393a;
  font-size: 0.25rem;
}
.delivery .price::after {
  content: "";
  width: 0.03rem;
  height: 0.3rem;
  display: inline-block;
  background-color: #676769;
  margin: 0 0.1rem;
}
.time-delivery {
  margin-left: 2.25rem;
  color: #676769;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.van-rate {
  z-index: -999999999999999 !important;
}
.start-content i {
  font-size: 0.25rem;
  color: #f8e646;
}
</style>
